<template>
  <GlobalHeader
    text="发电机组参数(3主1应)"
    xh="CW6250C1360DF7"
    xlh="2522L000026"
    :hour="null"
  ></GlobalHeader>
  <!-- <div
	  style="
		position: absolute;
		top: 170px;
		left: 1330px;
		color: #fff;
		font-size: 32px;
		z-index: 2;
	  "
	>
	</div> -->
  <div class="pdwlzt-page" ref="pdwlztBjRef">
    <div
      style="
        width: 100%;
        position: absolute;
        z-index: 4;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
      "
    >
      <Gauge
        min="0"
        max="2000"
        :value="powerListDate[0]?.z301.currentValue"
        :customStyle="{ marginLeft: '-25px' }"
      ></Gauge>
      <Gauge
        min="0"
        max="2000"
        :value="powerListDate[1]?.['z' + (301 + 16 * 1)]?.currentValue"
      ></Gauge>
      <Gauge
        min="0"
        max="2000"
        :value="powerListDate[2]?.['z' + (301 + 16 * 2)]?.currentValue"
      ></Gauge>
      <Gauge
        min="0"
        max="2000"
        :value="powerListDate[3]?.['z' + (301 + 16 * 3)]?.currentValue"
        :customStyle="{ marginLeft: '30px' }"
      ></Gauge>
    </div>
    <div
      style="
        width: 100%;
        height: 300px;
        background: rgb(45, 73, 97);
        position: absolute;
        z-index: 3;
        left: 0;
        top: 0;
      "
    ></div>
    <!-- <div
      class="pdwlzt-page-box"
      v-for="(item, index) in powInfo"
      :style="{ ...item.boxStyle }"
    ></div> -->
    <div
      class="round"
      v-for="(item, index) in powInfo"
      :style="{ ...item.roundStyle }"
    >
      <div
        :class="['circle']"
        :style="{
          background: stateLight(renderValue(index)),
        }"
      ></div>
      <div
        :class="{
          circle_bottom: true,
          animation: LightAni(renderValue(index)),
        }"
        :style="{
          background: stateLight(renderValue(index)),
          display: LightAni(renderValue(index)) ? 'block' : 'none',
        }"
      ></div>
      <!-- 'animation' -->
      <div
        :class="{
          circle_bottom2: true,
          animation2: LightAni(renderValue(index)),
        }"
        :style="{
          background: stateLight(renderValue(index)),
          display: LightAni(renderValue(index)) ? 'block' : 'none',
        }"
      ></div>

      <!-- 'animation2' -->
    </div>
    <div
      style="
        padding-left: 390px;
        justify-content: center;
        position: absolute;
        z-index: 5;
        bottom: 0;
        display: flex;
        top: 470px;
        color: #fff;
        font-size: 30px;
      "
    >
      <div
        :style="{ marginLeft: index == 3 ? '129px' : '66px' }"
        v-for="(item, index) in powerListDate"
        :key="index"
      >
        <div style="margin: 3px 0">
          水温:{{
            isEmptyToCharacter(renderbottomData(item, startNo[0], index, 1))
          }}℃
        </div>
        <div style="margin: 3px 0">
          油温:{{
            isEmptyToCharacter(renderbottomData(item, startNo[1], index, 1))
          }}℃
        </div>
        <div style="margin: 3px 0">
          油压:{{
            isEmptyToCharacter(renderbottomData(item, startNo[2], index, 2))
          }}bar
        </div>
        <div style="margin: 3px 0">
          电池:{{
            isEmptyToCharacter(renderbottomData(item, startNo[3], index, 1))
          }}V
        </div>
        <div style="margin: 3px 0">
          累时:{{
            isEmptyToCharacter(renderbottomData(item, startNo[4], index, 0))
          }}h
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import GlobalHeader from "./layout/GlobalHeader.vue";
import Gauge from "@/echarts/Gauge.vue";
import { straightLine, curveLine } from "@/mixins/globalRaphael.js";
import { color as colors } from "@/mixins/globalParam.js";
import { initDecimalPlaces } from "@/utils/utils.js";
import { isEmptyToCharacter } from "@/plugins/index.js";
let allData = inject("allData");
let powerListDate = ref([]);
let pdwlztRef = ref(null);
let pdwlztBjRef = ref(null);
let ctx = ref(null);
let off = [-22, 220.5, 465.5, 770.5];
let on = [0, 243.5, 486.5, 791.5];
let powInfo = [
  {
    boxStyle: {
      top: "407px",
      left: "438px",
    },
    max: "350",
    chartStyle: {
      height: "280px",
      width: "100px",
    },
    roundStyle: {
      top: "364px",
      left: "515px",
    },
  },
  {
    boxStyle: {
      top: "407px",
      left: "680px",
    },
    max: "350",
    chartStyle: {
      height: "280px",
      width: "100px",
    },
    roundStyle: {
      top: "364px",
      left: "758px",
    },
  },
  {
    boxStyle: {
      top: "407px",
      left: "925px",
    },
    max: "350",
    chartStyle: {
      height: "280px",
      width: "100px",
    },
    roundStyle: {
      top: "364px",
      left: "1002px",
    },
  },
  {
    boxStyle: {
      top: "407px",
      left: "1230px",
    },
    max: "100",
    chartStyle: {
      height: "280px",
      width: "100px",
    },
    roundStyle: {
      top: "364px",
      left: "1306px",
    },
  },
];
let startNo = [305, 306, 307, 308, 303];
// 电流 > 10 开启
let stateLight = computed(() => {
  return (zjVal) => {
    if (zjVal >= 10) return colors[3]; //
    return colors[0];
  };
});

let LightAni = computed(() => {
  return (zjVal) => {
    if (zjVal >= 10) return true; //
    return false;
  };
});
watch(
  () => allData.value,
  (newVal, oldVal) => {
    // let pdwlztBjRefs = pdwlztBjRef.value;
    // let targetWidth = pdwlztBjRefs.offsetWidth;
    // let targetHeight = pdwlztBjRefs.offsetHeight;
    // ctx.clearRect(0, 0, targetWidth, targetHeight);
    // console.log(targetWidth, targetHeight);
    powerListDate.value[0] = newVal.power1;
    powerListDate.value[1] = newVal.power2;
    powerListDate.value[2] = newVal.power3;
    powerListDate.value[3] = newVal.power_bak;
    // powerListDate.value.forEach((item, index) => {
    //   let key = "z" + (311 + index * 16);
    //   // 电流
    //   // let dlVal = item?.fdjzdl?.currentValue ?? item?.yjfdjzcs?.currentValue
    //   let dlVal = item[key]?.currentValue;
    //   if (dlVal > 50) {
    //     straightLine({ ctx, translateX: on[index] });
    //   }
    //   if (dlVal <= 50) {
    //     curveLine({ ctx, translateX: off[index] });
    //   }
    // });
  },
  {
    deep: true,
  }
);
// onMounted(() => {
//   let pdwlztBjRefs = pdwlztBjRef.value;
//   let targetWidth = pdwlztBjRefs.offsetWidth;
//   let targetHeight = pdwlztBjRefs.offsetHeight;
//   console.log("======", targetWidth, targetHeight);
//   el.width = targetWidth;
//   el.height = targetHeight;
//   // straightLine({ ctx })
//   // straightLine({ ctx, translateX: 243.5 })
//   // straightLine({ ctx, translateX: 486.5 })
//   // straightLine({ ctx, translateX: 791.5 })
//   curveLine({ ctx, translateX: -22 });
//   curveLine({ ctx, translateX: 220.5 });
//   curveLine({ ctx, translateX: 465.5 });
//   curveLine({ ctx, translateX: 770.5 });
// });

let renderValue = computed(() => {
  return (index) => {
    let key = "z" + (311 + 16 * index);
    let value = powerListDate.value[index]?.[key]?.currentValue || 0;
    return value;
  };
});

let renderbottomData = computed(() => {
  return (item, no, index, init) => {
    return (
      item?.["z" + (no + 16 * index)]?.currentValue ?? initDecimalPlaces(init)
    );
  };
});

let isEmptyArraySetCont = computed(() => {
  return (arr, setArr) => {
    if (!arr && isArray(arr) && arr.length > 0) {
      return arr;
    } else {
      return setArr;
    }
  };
});
</script>

<style scoped lang="scss">
.pdwlzt-page {
  position: relative;
  width: 1834px;
  height: 706px;
  background: url("@/assets/image/pdwlzk.png") no-repeat center center;
}

.round {
  position: absolute;
  left: 515px;
  top: 364px;
  padding-top: 15px;
  padding-left: 10px;
}
.warning {
  background-color: rgb(214, 58, 58) !important;
}
.stoping {
  background: gray !important;
}
.running {
  background-color: green !important;
}
.round div {
  background: rgba(192, 192, 192, 1);
}
// rgb(214, 58, 58)
.circle {
  width: 57px;
  height: 45px;
  z-index: 999;
  text-align: center;
  top: 20px;
  left: 16px;
  position: absolute;
}
.circle_bottom {
  background: rgba(58, 150, 225, 0.4);
  width: 60px;
  height: 50px;
  filter: alpha(opacity=40);
  position: absolute;
  top: 19px;
  left: 15px;
  display: none;
}
.circle_bottom2 {
  background: rgba(58, 150, 225, 0.2);
  // border-radius:100%;
  width: 69px;
  height: 57px;
  filter: alpha(opacity=20);
  // z-index:-110;
  position: relative;
  display: none;
}
.animation {
  -webkit-animation: twinkling 1s infinite ease-in-out;
  animation: twinkling 1s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animation2 {
  -webkit-animation: twinkling 1s infinite ease-in-out;
  animation: twinkling 1s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@keyframes twinkling {
  0% {
    opacity: 0.2;
    filter: alpha(opacity=20);
    -webkit-transform: scale(1);
  }
  50% {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -webkit-transform: scale(1.12);
  }
  100% {
    opacity: 0.2;
    filter: alpha(opacity=20);
    -webkit-transform: scale(1);
  }
}

// <div class="round">
//         <div class="circle"><a>消费进阶</a></div>
//         <div class="circle_bottom animation "></div>
//         <div class="circle_bottom2 animation2 "></div>
//     </div>

// 动画
.clPcolor {
  width: 50px;
  height: 50px;
  background-color: green;
  animation: clP 0.5s infinite;
}
.pdwlzt-page-box {
  display: flex;
  position: absolute;
  align-items: center;
  top: 407px;
  left: 438px;
  color: #fff;
}
.pdwlzt-page-box > div {
  padding: 6px 0;
}
@keyframes clP {
  from {
    opacity: 1;
  }
  to {
    // background-color: transparent;
    opacity: 0.1;
  }
}
</style>
